<template>
  <view class="travel-detail-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="left" @click="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <view class="title">游记详情</view>
      <view class="right">
        <text class="share-btn" @click="handleShare">分享</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y v-if="travel">
      <view class="detail-card">
        <!-- 用户信息 -->
        <view class="user-info">
          <image class="avatar" :src="travel.userAvatar" mode="aspectFill" @click="handleUserClick(travel.userId)"></image>
          <view class="user-meta">
            <text class="nickname">{{travel.userNickname}}</text>
            <text class="time">{{formatTime(travel.createdAt)}}</text>
          </view>
          <view class="follow-btn" @click="handleFollow" v-if="!isCurrentUser">
            <text>{{isFollowing ? '已关注' : '关注'}}</text>
          </view>
        </view>
        
        <!-- 游记内容 -->
        <view class="travel-content">
          <text class="content-text">{{travel.content}}</text>
        </view>
        
        <!-- 位置信息 -->
        <view class="location-info" v-if="travel.location">
          <text class="location-icon">📍</text>
          <text class="location-text">{{travel.location}}</text>
        </view>
        
        <!-- 图片 -->
        <view class="travel-images" v-if="travel.image">
          <view class="image-grid">
            <image v-for="(url, index) in imageUrls" 
                   :key="index" 
                   :src="url" 
                   mode="widthFix"
                   @click="previewImage(index)">
            </image>
          </view>
        </view>
        
        <!-- 互动统计 -->
        <view class="travel-stats">
          <view class="stat-item">
            <text class="iconfont icon-view"></text>
            <text class="stat-value">{{travel.views || 0}}</text>
            <text class="stat-label">浏览</text>
          </view>
          <view class="stat-item" @click="handleLike">
            <text class="iconfont icon-icon" :class="{'active': travel.liked}"></text>
            <text class="stat-value" :class="{'active': travel.liked}">{{travel.likes || 0}}</text>
            <text class="stat-label">点赞</text>
          </view>
          <view class="stat-item" @click="handleFavorite">
            <text class="iconfont icon-shoucang" :class="{'active': travel.favorited}"></text>
            <text class="stat-value" :class="{'active': travel.favorited}">{{travel.favorites || 0}}</text>
            <text class="stat-label">收藏</text>
          </view>
        </view>
        
        <!-- 添加评论区域 -->
        <view class="comments-section">
          <view class="comments-header">
            <text class="comments-title">评论 ({{commentCount}})</text>
          </view>
          
          <!-- 评论列表 -->
          <view class="comments-list" v-if="comments.length > 0">
            <view class="comment-item" v-for="comment in comments" :key="comment.id">
              <view class="comment-user">
                <image class="comment-avatar" :src="comment.userAvatar" mode="aspectFill" @click="handleUserClick(comment.userId)"></image>
                <view class="comment-meta">
                  <text class="comment-nickname">{{comment.userNickname}}</text>
                  <text class="comment-time">{{formatTime(comment.createTime)}}</text>
                </view>
                <!-- 删除按钮 -->
                <view class="delete-btn" v-if="currentUser && currentUser.id === comment.userId" @click="handleDeleteComment(comment.id)">
                  <text class="delete-icon">🗑️</text>
                </view>
              </view>
              <view class="comment-content">{{comment.content}}</view>
              <view class="comment-actions">
                <view class="action-item" @click="handleCommentLike(comment)">
                  <text class="iconfont icon-icon" :class="{'active': comment.isLiked}"></text>
                  <text class="action-count" :class="{'active': comment.isLiked}">{{comment.likes || 0}}</text>
                </view>
                <view class="action-item" @click="showReplyInput(comment)">
                  <text class="iconfont icon-comment"></text>
                  <text class="action-text">回复</text>
                </view>
              </view>
              
              <!-- 回复列表 -->
              <view class="replies-list" v-if="comment.replies && comment.replies.length > 0">
                <view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
                  <view class="reply-user">
                    <image class="reply-avatar" :src="reply.userAvatar" mode="aspectFill" @click="handleUserClick(reply.userId)"></image>
                    <view class="reply-meta">
                      <text class="reply-nickname">{{reply.userNickname}}</text>
                      <text class="reply-time">{{formatTime(reply.createTime)}}</text>
                    </view>
                  </view>
                  <view class="reply-content">
                    <text class="reply-to">@{{reply.parentUserNickname}}</text>
                    {{reply.content}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 加载更多按钮 -->
          <view class="load-more" v-if="hasMore" @click="loadMoreComments">
            <text class="load-more-text">{{commentsLoading ? '加载中...' : '加载更多'}}</text>
          </view>
          
          <!-- 无评论提示 -->
          <view class="no-comments" v-else>
            <text class="no-comments-text">暂无评论，快来抢沙发吧~</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 评论输入框 -->
    <view class="comment-input-section" :class="{'reply-mode': replyTo}">
      <input 
        class="comment-input"
        v-model="commentContent"
        :placeholder="replyTo ? `回复 ${replyTo.userNickname}` : '说点什么吧...'"
        @confirm="handleSubmitComment"
      />
      <view class="submit-btn" @click="handleSubmitComment">发送</view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <view class="loading-content">
        <text class="loading-icon">🔄</text>
        <text class="loading-text">加载中...</text>
      </view>
    </view>
    
    <!-- 错误状态 -->
    <view v-if="error" class="error-state">
      <view class="error-content">
        <text class="error-icon">⚠️</text>
        <text class="error-text">{{error}}</text>
        <view class="retry-btn" @click="fetchTravelDetail">重试</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { 
  getTravelDetail,
  likeTravel,
  unlikeTravel,
  favoriteTravel,
  unfavoriteTravel,
  getLikeStatus,
  getFavoriteStatus,
  increaseTravelView
} from '@/api/travel'
import {
  createComment,
  getTravelComments,
  getCommentReplies,
  deleteComment,
  likeComment,
  unlikeComment,
  getTravelCommentCount
} from '@/api/comment'
import { followUser, unfollowUser, checkFollowStatus } from '@/api/follow'
import { shareTravel, cancelShareTravel } from '@/api/share'

// 响应式数据
const travel = ref(null)
const loading = ref(true)
const error = ref('')
const currentUser = ref(null)
const isFollowing = ref(false)
const travelId = ref(null)

// 修改评论相关的响应式数据
const comments = ref([])
const commentCount = ref(0)
const commentContent = ref('')
const replyTo = ref(null)
const commentsLoading = ref(false)
const currentPage = ref(0)
const pageSize = ref(9999)
const hasMore = ref(true)

// 计算属性
const isCurrentUser = computed(() => {
  if (!currentUser.value || !travel.value) return false
  return currentUser.value.id === travel.value.userId
})

// 计算图片数组
const imageUrls = computed(() => {
  if (!travel.value?.image) return []
  return travel.value.image.split(',')
})

// 获取路由参数
const getRouteParams = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  return currentPage.options || {}
}

// 初始化用户信息
const initUserInfo = () => {
  try {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      currentUser.value = userInfo
    }
  } catch (err) {
    console.error('获取用户信息失败:', err)
  }
}

// 格式化时间
const formatTime = (timeStr) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date
  
  // 一小时内
  if (diff < 3600000) {
    const minutes = Math.floor(diff / 60000)
    return `${minutes}分钟前`
  }
  
  // 一天内
  if (diff < 86400000) {
    const hours = Math.floor(diff / 3600000)
    return `${hours}小时前`
  }
  
  // 一周内
  if (diff < 604800000) {
    const days = Math.floor(diff / 86400000)
    return `${days}天前`
  }
  
  // 显示具体日期时间
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}

// 获取游记详情
const fetchTravelDetail = async () => {
  loading.value = true
  error.value = ''
  
  try {
    const routeParams = getRouteParams()
    
    if (!routeParams.id) {
      throw new Error('游记ID不存在')
    }
    
    travelId.value = routeParams.id
    
    // 增加浏览量
    await increaseTravelView(travelId.value)
    
    const res = await getTravelDetail(travelId.value)
    
    if (res.code === 200) {
      travel.value = res.data
      console.log('游记详情加载成功:', res.data)
      
      // 如果已登录，检查点赞和收藏状态
      if (currentUser.value) {
        checkLikeStatus()
        checkFavoriteStatus()
        // 检查关注状态
        checkUserFollowStatus()
      }
    } else {
      throw new Error(res.message || '获取游记详情失败')
    }
  } catch (err) {
    console.error('获取游记详情出错:', err)
    error.value = err.message || '加载失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 检查点赞状态
const checkLikeStatus = async () => {
  if (!currentUser.value || !travelId.value) return
  
  try {
    const userId = currentUser.value.id
    const res = await getLikeStatus(travelId.value, userId)
    
    if (res.code === 200 && travel.value) {
      travel.value.liked = res.data
      console.log('点赞状态:', res.data)
    }
  } catch (err) {
    console.error('获取点赞状态失败:', err)
  }
}

// 检查收藏状态
const checkFavoriteStatus = async () => {
  if (!currentUser.value || !travelId.value) return
  
  try {
    const userId = currentUser.value.id
    const res = await getFavoriteStatus(travelId.value, userId)
    
    if (res.code === 200 && travel.value) {
      travel.value.favorited = res.data
      console.log('收藏状态:', res.data)
    }
  } catch (err) {
    console.error('获取收藏状态失败:', err)
  }
}

// 检查关注状态
const checkUserFollowStatus = async () => {
  if (!currentUser.value || !travel.value || currentUser.value.id === travel.value.userId) {
    return
  }
  
  try {
    const res = await checkFollowStatus(travel.value.userId)
    if (res.code === 200) {
      isFollowing.value = res.data
    }
  } catch (err) {
    console.error('获取关注状态失败:', err)
  }
}

// 处理点赞
const handleLike = async () => {
  if (!currentUser.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  if (!travel.value) return
  
  try {
    const userId = currentUser.value.id 
    
    if (travel.value.liked) {
      // 取消点赞
      await unlikeTravel(travel.value.id, userId)
      travel.value.likes--
      travel.value.liked = false
    } else {
      // 点赞
      await likeTravel(travel.value.id, userId)
      travel.value.likes++
      travel.value.liked = true
    }
  } catch (err) {
    console.error('操作失败:', err)
    uni.showToast({
      title: '操作失败，请稍后重试',
      icon: 'none'
    })
  }
}

// 处理收藏
const handleFavorite = async () => {
  if (!currentUser.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  if (!travel.value) return
  
  try {
    const userId = currentUser.value.id 
    
    if (travel.value.favorited) {
      // 取消收藏
      await unfavoriteTravel(travel.value.id, userId)
      travel.value.favorites--
      travel.value.favorited = false
    } else {
      // 收藏
      await favoriteTravel(travel.value.id, userId)
      travel.value.favorites++
      travel.value.favorited = true
    }
  } catch (err) {
    console.error('操作失败:', err)
    uni.showToast({
      title: '操作失败，请稍后重试',
      icon: 'none'
    })
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    urls: imageUrls.value,
    current: index
  })
}

// 处理分享
const handleShare = async () => {
  if (!travel.value) return
  
  if (!currentUser.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  try {
    // 调用分享接口
    const res = await shareTravel(travelId.value)
    
    if (res.code === 200) {
      // 获取分享码
      const shareCode = res.data.shareCode
      const shareUrl = `/pages/discovery/travel-detail?shareCode=${shareCode}`
      
      uni.showModal({
        title: '分享成功',
        content: '分享链接已生成，是否复制链接或打开分享菜单？',
        confirmText: '分享',
        cancelText: '复制',
        success: (res) => {
          if (res.confirm) {
            // 打开系统分享菜单
            uni.share({
              provider: 'weixin',
              scene: 'WXSceneSession',
              type: 0,
              title: `${travel.value.userNickname}的旅行故事`,
              summary: travel.value.content.substring(0, 40) + '...',
              imageUrl: travel.value.image,
              href: shareUrl,
              success: function (res) {
                console.log('分享成功：', res)
              },
              fail: function (err) {
                console.log('分享失败：', err)
                uni.showToast({
                  title: '分享失败',
                  icon: 'none'
                })
              }
            })
          } else if (res.cancel) {
            // 复制链接
            uni.setClipboardData({
              data: shareUrl,
              success: () => {
                uni.showToast({
                  title: '链接已复制',
                  icon: 'success'
                })
              }
            })
          }
        }
      })
    } else {
      uni.showToast({
        title: res.message || '分享失败',
        icon: 'none'
      })
    }
  } catch (err) {
    console.error('分享失败:', err)
    uni.showToast({
      title: '分享失败，请重试',
      icon: 'none'
    })
  }
}

// 处理关注/取消关注
const handleFollow = async () => {
  if (!currentUser.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  if (currentUser.value.id === travel.value.userId) {
    uni.showToast({
      title: '不能关注自己',
      icon: 'none'
    })
    return
  }
  
  try {
    if (isFollowing.value) {
      // 取消关注
      const res = await unfollowUser(travel.value.userId)
      if (res.code === 200) {
        isFollowing.value = false
        uni.showToast({
          title: '已取消关注',
          icon: 'success'
        })
      }
    } else {
      // 关注
      const res = await followUser(travel.value.userId)
      if (res.code === 200) {
        isFollowing.value = true
        uni.showToast({
          title: '关注成功',
          icon: 'success'
        })
      }
    }
  } catch (err) {
    console.error('操作失败:', err)
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none'
    })
  }
}

// 获取评论列表
const fetchComments = async (isLoadMore = false) => {
  if (!travelId.value || commentsLoading.value) return
  
  commentsLoading.value = true
  try {
    const params = {
      page: isLoadMore ? currentPage.value : 0,
      size: pageSize.value,
      currentUserId: currentUser.value?.id
    }
    
    const [commentsRes, countRes] = await Promise.all([
      getTravelComments(travelId.value, params),
      getTravelCommentCount(travelId.value)
    ])
    
    if (commentsRes.code === 200) {
      const newComments = commentsRes.data.content
      if (isLoadMore) {
        comments.value = [...comments.value, ...newComments]
      } else {
        comments.value = newComments
      }
      
      // 获取每条评论的回复
      await Promise.all(comments.value.map(async (comment) => {
        if (!comment.replies) {
          const repliesRes = await getCommentReplies(comment.id, {
            page: 0,
            size: 5,
            currentUserId: currentUser.value?.id
          })
          if (repliesRes.code === 200) {
            comment.replies = repliesRes.data.content
          }
        }
      }))
      
      // 更新分页信息
      hasMore.value = !commentsRes.data.last
      currentPage.value = commentsRes.data.number + 1
    }
    
    if (countRes.code === 200) {
      commentCount.value = countRes.data
    }
  } catch (err) {
    console.error('获取评论失败:', err)
    uni.showToast({
      title: '获取评论失败',
      icon: 'none'
    })
  } finally {
    commentsLoading.value = false
  }
}

// 提交评论
const handleSubmitComment = async () => {
  if (!currentUser.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  if (!commentContent.value.trim()) {
    uni.showToast({
      title: '请输入评论内容',
      icon: 'none'
    })
    return
  }
  
  try {
    const data = {
      travelId: travelId.value,
      userId: currentUser.value.id,
      content: commentContent.value,
      parentId: replyTo.value ? replyTo.value.id : null
    }
    
    const res = await createComment(data)
    
    if (res.code === 200) {
      uni.showToast({
        title: '评论成功',
        icon: 'success'
      })
      
      // 清空输入框并刷新评论列表
      commentContent.value = ''
      replyTo.value = null
      currentPage.value = 0
      await fetchComments()
    }
  } catch (err) {
    console.error('评论失败:', err)
    uni.showToast({
      title: '评论失败，请重试',
      icon: 'none'
    })
  }
}

// 删除评论
const handleDeleteComment = async (commentId) => {
  try {
    const res = await deleteComment(commentId)
    
    if (res.code === 200) {
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      })
      // 从评论列表中移除该评论
      comments.value = comments.value.filter(comment => comment.id !== commentId)
      commentCount.value--
    }
  } catch (err) {
    console.error('删除评论失败:', err)
    uni.showToast({
      title: '删除失败，请重试',
      icon: 'none'
    })
  }
}

// 点赞评论
const handleCommentLike = async (comment) => {
  if (!currentUser.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  try {
    if (comment.isLiked) {
      await unlikeComment(comment.id)
      comment.likes--
      comment.isLiked = false
    } else {
      await likeComment(comment.id)
      comment.likes++
      comment.isLiked = true
    }
  } catch (err) {
    console.error('操作失败:', err)
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none'
    })
  }
}

// 显示回复输入框
const showReplyInput = (comment) => {
  if (!currentUser.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  replyTo.value = comment
  // 聚焦输入框
  nextTick(() => {
    const input = document.querySelector('.comment-input')
    if (input) input.focus()
  })
}

// 加载更多评论
const loadMoreComments = () => {
  if (!hasMore.value || commentsLoading.value) return
  fetchComments(true)
}

// 处理用户点击
const handleUserClick = (userId) => {
  if (!userId) return
  
  // 获取当前用户信息
  const userInfo = uni.getStorageSync('userInfo')
  
  // 判断是否是当前用户
  if (userInfo && userInfo.id === userId) {
    // 如果是当前用户，跳转到个人中心
    uni.switchTab({
      url: '/pages/usercenter/index'
    })
  } else {
    // 如果是其他用户，跳转到用户详情页
    uni.navigateTo({
      url: `/pages/discovery/user-detail?id=${userId}`
    })
  }
}

// 页面加载时获取数据
onMounted(() => {
  initUserInfo()
  fetchTravelDetail()
  fetchComments()
})
</script>

<style lang="scss" scoped>
.travel-detail-page {
  min-height: 100vh;
  background-color: #f8f9fa;

  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

    .left {
      padding: 15rpx;
      margin-left: -15rpx;
      
      .iconfont {
        font-size: 36rpx;
        color: #333;
      }
    }

    .title {
      font-size: 34rpx;
      font-weight: 500;
      color: #333;
    }

    .right {
      padding: 15rpx;
      margin-right: -15rpx;
      
      .share-btn {
        font-size: 28rpx;
        color: #42b983;
      }
    }
  }

  .content {
    margin-top: 90rpx;
    padding: 20rpx;
    height: calc(100vh - 90rpx);
    box-sizing: border-box;
    
    .detail-card {
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      padding: 30rpx;
      
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
        
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
        
        .user-meta {
          flex: 1;
          margin-left: 16rpx;
          
          .nickname {
            display: block;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 4rpx;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .follow-btn {
          background-color: #f0f7f3;
          color: #42b983;
          font-size: 24rpx;
          padding: 8rpx 20rpx;
          border-radius: 30rpx;
        }
      }
      
      .travel-content {
        margin-bottom: 20rpx;
        
        .content-text {
          font-size: 30rpx;
          color: #333;
          line-height: 1.8;
        }
      }
      
      .location-info {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .location-icon {
          font-size: 24rpx;
          margin-right: 8rpx;
        }
        
        .location-text {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .travel-images {
        margin: 30rpx 0;
        
        .image-grid {
          display: grid;
          gap: 20rpx;
          grid-template-columns: 1fr;
          
          image {
            width: 100%;
            border-radius: 12rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
          }
        }
      }
      
      .travel-stats {
        display: flex;
        justify-content: space-around;
        margin-top: 20rpx;
        border-top: 1rpx solid #f0f0f0;
        padding-top: 20rpx;
        
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10rpx 20rpx;
          
          .stat-icon {
            font-size: 36rpx;
            margin-bottom: 8rpx;
            
            &.active {
              color: #ff6b6b;
            }
          }
          
          .iconfont {
            font-size: 36rpx;
            margin-bottom: 8rpx;
            color: #999;
            transition: all 0.3s ease;
            
            &.active {
              color: #ff6b6b;
              transform: scale(1.1);
            }
          }
          
          .stat-value {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 4rpx;
            transition: color 0.3s ease;
            
            &.active {
              color: #ff6b6b;
              font-weight: 500;
            }
          }
          
          .stat-label {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
      
      .comments-section {
        margin-top: 30rpx;
        border-top: 1rpx solid #f0f0f0;
        padding-top: 20rpx;
        
        .comments-header {
          margin-bottom: 20rpx;
          
          .comments-title {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
          }
        }
        
        .comments-list {
          .comment-item {
            margin-bottom: 30rpx;
            padding-bottom: 20rpx;
            border-bottom: 1rpx solid #f5f5f5;
            
            .comment-user {
              display: flex;
              align-items: center;
              margin-bottom: 12rpx;
              
              .comment-avatar {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
              }
              
              .comment-meta {
                flex: 1;
                margin-left: 12rpx;
                
                .comment-nickname {
                  font-size: 28rpx;
                  color: #333;
                  font-weight: 500;
                }
                
                .comment-time {
                  font-size: 24rpx;
                  color: #999;
                  margin-left: 12rpx;
                }
              }
              
              .delete-btn {
                padding: 10rpx;
                
                .delete-icon {
                  font-size: 32rpx;
                  color: #999;
                }
              }
            }
            
            .comment-content {
              font-size: 28rpx;
              color: #333;
              line-height: 1.6;
              margin: 10rpx 0;
              padding-left: 72rpx;
            }
            
            .comment-actions {
              display: flex;
              padding-left: 72rpx;
              margin-top: 12rpx;
              
              .action-item {
                display: flex;
                align-items: center;
                margin-right: 30rpx;
                
                .action-icon {
                  font-size: 28rpx;
                  margin-right: 6rpx;
                }
                
                .iconfont {
                  font-size: 28rpx;
                  color: #999;
                  margin-right: 6rpx;
                  transition: all 0.3s ease;
                  
                  &.active {
                    color: #ff6b6b;
                    transform: scale(1.1);
                  }
                }
                
                .action-count {
                  font-size: 24rpx;
                  color: #999;
                  transition: color 0.3s ease;
                  
                  &.active {
                    color: #ff6b6b;
                    font-weight: 500;
                  }
                }
              }
            }
            
            .replies-list {
              margin-top: 20rpx;
              padding-left: 72rpx;
              
              .reply-item {
                background-color: #f8f9fa;
                border-radius: 8rpx;
                padding: 16rpx;
                margin-bottom: 12rpx;
                
                .reply-user {
                  display: flex;
                  align-items: center;
                  
                  .reply-avatar {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                  }
                  
                  .reply-meta {
                    margin-left: 8rpx;
                    
                    .reply-nickname {
                      font-size: 24rpx;
                      color: #333;
                    }
                    
                    .reply-time {
                      font-size: 22rpx;
                      color: #999;
                      margin-left: 8rpx;
                    }
                  }
                }
                
                .reply-content {
                  font-size: 26rpx;
                  color: #333;
                  margin-top: 8rpx;
                  
                  .reply-to {
                    color: #42b983;
                    margin-right: 6rpx;
                  }
                }
              }
            }
          }
        }
        
        .load-more {
          text-align: center;
          padding: 20rpx 0;
          
          .load-more-text {
            font-size: 28rpx;
            color: #666;
          }
        }
        
        .no-comments {
          text-align: center;
          padding: 40rpx 0;
          
          .no-comments-text {
            font-size: 28rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  .loading-state, .error-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .loading-content, .error-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .loading-icon, .error-icon {
        font-size: 48rpx;
        margin-bottom: 16rpx;
      }
      
      .loading-text, .error-text {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 24rpx;
      }
      
      .retry-btn {
        background-color: #42b983;
        color: #fff;
        font-size: 28rpx;
        padding: 12rpx 30rpx;
        border-radius: 30rpx;
      }
    }
  }
}

.comment-input-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  &.reply-mode {
    background-color: #f8f9fa;
  }
  
  .comment-input {
    flex: 1;
    height: 72rpx;
    background-color: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    margin-right: 20rpx;
  }
  
  .submit-btn {
    background-color: #42b983;
    color: #fff;
    font-size: 28rpx;
    padding: 16rpx 30rpx;
    border-radius: 36rpx;
  }
}
</style> 